<template>
	<view>
		<movable-area class="movablearea"
			:style="'height:'+movaheight+';position: fixed;right: 0rpx;width: 100vw;z-index: 222;transform: translate(0, -50%);'+'top:'+movaTop+';'">
			<movable-view :x="x" :y="y" :direction="direction" class="movableview" :animation="false" @touchend="handleTouchEnd"
				style="width: 88rpx;height: 88rpx;">
				<!-- <button type="default" class="kefubtn allbutton" @click="go('/pages3/kefuzhongxin/kefuzhongxin')" style="background: none;
				background-color: none;padding:0
				width: 88rpx;
				height: 88rpx;
				overflow: hidden;
				border-radius: 50%;
				box-shadow: 0 0 8rpx #999;">
					<image src="/static/add.png" mode="" style="width:88rpx;height: 88rpx;"></image>
				</button> -->
				<view class="frame-content flexal" v-if="iconShow" @click="go('/pages3/video/video')">
					<view class="frame-content1"></view>
					<image :src="avatar" class="img"></image>
					<view style="margin-left: 28rpx;flex: 1;">
						<view class="name">姓名</view>
						<view class="text">邀请你语音通话</view>
					</view>
					<image src="/static/video/a90daeaeaaf3ef48bc0685042f66e00.png" class="icon" @click="ok"></image>
					<image src="/static/video/6744acc80344dd1cbe271e34eeb6e29.png" class="icon" style="margin-right: 50rpx;margin-left: 40rpx;"></image>
				</view>
				
				<view class="frame flexcen" v-else @click="go('/pages3/video/video')">
					<image src="/static/video/f454686b7448c489a435b5bff43878a.png" style="width: 51rpx;height: 55rpx;"></image>
					<view style="font-weight: 400;font-size: 32rpx;color: #2B80FF;margin-top: 25rpx;">等待接听</view>
				</view>
				
			</movable-view>
		</movable-area>
	</view>

</template>

<script>
	export default {
		name: "movablearea1",
		props:["movaheight","movaTop"], 
		data() {
			return {
				x: 0, //客服x
				y: 600, //客服y
				direction:'all',					//可移动方向  all:全部  vertical:垂直  horizontal:水平  none:禁止移动
				avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
				iconShow:true,
			}
		},
		watch:{
			// movaheight(newValue,oldValue){
			// 	console.log('新的传参',newValue)
			// }
			// y(newValue,oldValue){
			// 	console.log('修改',newValue)
			// }
		},
		onLoad() {

		},
		onReady() {

		},
		onShow() {

		},
		methods: {

			ok(){
				console.log('点击了')
				this.iconShow = false
				this.direction = 'all'
				this.$emit('editMovaheightAll')
			},
			// 初次纵向滑动
			vtouchmove(e){
				// console.log('e',e,this.y)
				// if(e.changedTouches[0].pageY < 130){
				// 	console.log('我被触发了')
				// }
			},
			// 滑动结束
			handleTouchEnd(e){
				console.log('e',e)
				if(e.changedTouches[0].pageY < 130){
					// console.log('我被触发了')
					// this.iconShow = false
					this.ok()
				}
			}
		}

	}
</script>

<style>
</style>

<style lang="less">
	.movablearea {


		.movableview {


			.kefubtn {}
		}
	}
	.frame{
		flex-direction: column;
		width: 179rpx;
		height: 172rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.21);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	
	.frame-content{
		margin-left: 32rpx;
		width: 686rpx;
		height: 176rpx;
		// background-color: rgba(0, 0, 0, 0.5);
		// backdrop-filter: blur(10px) saturate(180%);
		// -webkit-backdrop-filter: blur(10px) saturate(180%);
		// filter: blur(10rpx);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		.frame-content1{
			position: absolute;
			width: 686rpx;
			height: 176rpx;
			background-color: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(10px) saturate(180%);
			-webkit-backdrop-filter: blur(10px) saturate(180%);
			filter: blur(1rpx);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
		}
		// padding: 35rpx 50rpx 41rpx 48rpx;
		.img{
			position: relative;
			margin-left: 48rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.name{
			position: relative;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.text{
			position: relative;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.icon{
			position: relative;
			width: 72rpx;
			height: 72rpx;
		}
	}
</style>